<template>
    <div class="flex items-center">
        <!-- 分页 -->
        <div class="flex items-center">
            <icon
                class="cursor-pointer hover:text-primary"
                name="el-icon-ArrowLeft"
                :size="16"
                @click="handleSwitchPager('prev')" />
            <div class="flex items-center text-center">
                <input
                    v-model="currentPages"
                    class="text-center"
                    type="number"
                    :min="1"
                    :max="totalPages"
                    :style="{ width: '40px' }"
                    @change="onInputChange" />
                /
                <div :style="{ width: '40px' }">
                    {{ totalPages }}
                </div>
            </div>
            <icon
                class="cursor-pointer hover:text-primary"
                name="el-icon-ArrowRight"
                :size="16"
                @click="handleSwitchPager('next')" />
        </div>

        <!-- 分割 -->
        <div
            class="w-[1px] h-[16px] inline-block bg-[#E5E5E5] ml-[4px] mr-[8px]"></div>

        <!-- 缩放 -->
        <div class="flex items-center space-x-2">
            <icon
                name="el-icon-ZoomOut"
                :size="16"
                @click="handleSwitchScale('prev')" />
            <select v-model="currentScales" @change="handleSwitchScale">
                <option v-for="scale in scales" :key="String(scale)" :value="scale">
                    {{ scale }}%
                </option>
            </select>
            <icon
                name="el-icon-ZoomIn"
                :size="16"
                @click="handleSwitchScale('next')" />
        </div>

        <!-- 搜索 -->
        <!-- <div class="ml-4">
            <popover-input>
                <el-button type="default" size="small" link>
                    <icon :size="16" name="el-icon-Search" />
                    <span>查找</span>
                </el-button>
            </popover-input>
        </div> -->
    </div>
</template>

<script setup lang="ts">
const props = defineProps({
    currentPage: {
        type: Number,
        default: 0,
    },
    currentScale: {
        type: Number,
        default: 100,
    },
    totalPages: {
        type: Number,
        default: 0,
    },
    scales: {
        type: Array,
        default: () => {
            return [50, 75, 100, 125, 150, 175, 200]
        },
    },
})

// const emits = defineEmits([
//     'switchScale',
//     'switchPager',
//     'jumpPager',
//     'update:currentPage',
//     'update:currentScale',
// ])

const emits = defineEmits<{
    switchScale: [value: 'prev' | 'next' | number];
    switchPager: [value: 'prev' | 'next' | number];
    'update:currentPage': [value: number];
    'update:currentScale': [value: number];
}>()

const onInputChange = async (e: Event) => {
    const value = Number((e.target as HTMLInputElement).value)
    emits('switchPager', value)
}

const currentPages = computed({
    get() {
        return props.currentPage
    },
    set(val) {
        emits('update:currentPage', val)
    },
})

const currentScales = computed({
    get() {
        return props.currentScale
    },
    set(val) {
        emits('update:currentScale', val)
    },
})

// 切换缩放
const handleSwitchScale = (event: any) => emits('switchScale', event)

// 切换页面
const handleSwitchPager = (event: any) => emits('switchPager', event)

// watch(
//     () => currentPages.value,
//     (val) => {
//         emits('update:currentPage', parseInt(String(val)))
//     }
// )

// watch(
//     () => currentScales.value,
//     (val) => {
//         emits('update:currentScale', parseInt(String(val)))
//     }
// )
</script>
